<dl id="controls" class="bui-accordion">

    <dt class="bui-btn bui-box">
        <div class="span1">框架</div>
        <i class="icon-accordion"></i>
    </dt>
    <dd>
        <ul class="bui-list">
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.tab_head_dynamic.html">
                <div class="span1">顶部导航动态加载</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.tab_dynamic.html">
                <div class="span1">底部导航动态加载</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.pullrefresh.html">
                <div class="span1">下拉刷新</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.list.html">
                <div class="span1">下拉刷新及滚动加载</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.searchbar.html">
                <div class="span1">搜索加载</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.searchbar_head.html">
                <div class="span1">头部搜索</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.tab_side_dynamic.html">
                <div class="span1">分类动态数据</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/router/index.html">
                <div class="span1">单页路由</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_loader/index.html">
                <div class="span1">模块加载</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </dd>
    <dt class="bui-btn bui-box">
        <div class="span1">列表类</div>
        <i class="icon-accordion"></i>
    </dt>
    <dd>
        <ul class="bui-list">
            <li class="bui-btn bui-box" href="pages/ui/list.html">
                <div class="span1">普通列表</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/list_mline.html">
                <div class="span1">多行列表</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/list_icon_small.html">
                <div class="span1">小图标列表</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/list_icon.html">
                <div class="span1">大图标列表</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/list_thumbnail.html">
                <div class="span1">图文列表</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/list_pic.html">
                <div class="span1">图片列表</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/list_grid.html">
                <div class="span1">宫格列表</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.listview.html">
                <div class="span1">交互列表</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </dd>
    <dt class="bui-btn bui-box">
        <div class="span1">选项卡</div>
        <i class="icon-accordion"></i>
    </dt>
    <dd>
        <ul class="bui-list">
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.tab.html">
                <div class="span1">固定选项卡</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.tab_scroll.html">
                <div class="span1">滑动选项卡</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.tab_foot.html">
                <div class="span1">底部选项卡</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.tab_side.html">
                <div class="span1">纵向选项卡</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.tab_foot_tab.html">
                <div class="span1">多层嵌套</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </dd>
    <dt class="bui-btn bui-box">
        <div class="span1">轮播类</div>
        <i class="icon-accordion"></i>
    </dt>
    <dd>
        <ul class="bui-list">
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.slide.html">
                <div class="span1">焦点图</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.slide_title.html">
                <div class="span1">标题焦点图</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.slide_cross.html">
                <div class="span1">跨屏焦点图</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.slide_welcome.html">
                <div class="span1">欢迎引导页</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.slide_note.html">
                <div class="span1">滚动公告</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.slide_gallery.html">
                <div class="span1">相册</div>
                <span class="bui-badges">新</span>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </dd>
    <dt class="bui-btn bui-box">
        <div class="span1">侧滑菜单</div>
        <i class="icon-accordion"></i>
    </dt>
    <dd>
        <ul class="bui-list">
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.sidebar.html">
                <div class="span1">左侧菜单</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.sidebar_double.html">
                <div class="span1">两侧菜单</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </dd>
    <dt class="bui-btn bui-box">
        <div class="span1">抽屉菜单</div>
        <i class="icon-accordion"></i>
    </dt>
    <dd>
        <ul class="bui-list">
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.swipe.html">
                <div class="span1">左右抽屉菜单</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.swipe_y.html">
                <div class="span1">上下抽屉菜单</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.swipe_date.html">
                <div class="span1">日历模拟</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.swipe_scenes.html">
                <div class="span1">复杂嵌套</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </dd>
    <dt class="bui-btn bui-box">
        <div class="span1">折叠菜单</div>
        <i class="icon-accordion"></i>
    </dt>
    <dd>
        <ul class="bui-list">
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.accordion.html">
                <div class="span1">折叠菜单</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.accordion_panel.html">
                <div class="span1">折叠面板</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </dd>
    <dt class="bui-btn bui-box">
        <div class="span1">弹出层交互</div>
        <i class="icon-accordion"></i>
    </dt>
    <dd>
        <ul class="bui-list">
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.mask.html">
                <div class="span1">遮罩</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.loading.html">
                <div class="span1">加载进度</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.actionsheet.html">
                <div class="span1">弹出菜单</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.actionsheet_custom.html">
                <div class="span1">自定义弹出菜单</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.dropdown.html">
                <div class="span1">下拉菜单</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.dropdown_tab.html">
                <div class="span1">二级下拉菜单</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.dropdown_levelselect.html">
                <div class="span1">三级下拉菜单</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.select_level_popup.html">
                <div class="span1">动态加载层级选择</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.levelselect.html">
                <div class="span1">省市区层级选择</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.alert.html">
                <div class="span1">提醒框</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.confirm.html">
                <div class="span1">确认框</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.dialog_time.html">
                <div class="span1">倒计时对话框</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.dialog.html">
                <div class="span1">自定义对话框</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui_controls/bui.hint.html">
                <div class="span1">自动消失提示框</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </dd>
    <dt class="bui-btn bui-box">
        <div class="span1">其他</div>
        <i class="icon-accordion"></i>
    </dt>
    <dd>
        <ul class="bui-list">
            <li class="bui-btn bui-box" href="pages/ui/article.html">
                <div class="span1">文章</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/panel.html">
                <div class="span1">面板</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/nav.html">
                <div class="span1">导航</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/bar.html">
                <div class="span1">头部</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/icon.html">
                <div class="span1">图标</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/badges.html">
                <div class="span1">红点</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/hint.html">
                <div class="span1">状态提醒</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/sub.html">
                <div class="span1">角标</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/ui/tag.html">
                <div class="span1">标签</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </dd>
    <dt class="bui-btn bui-box">
        <div class="span1">与第三方配合</div>
        <i class="icon-accordion"></i>
    </dt>
    <dd>
        <ul class="bui-list">
            <li class="bui-btn bui-box" href="pages/thirdpart/map/map.html">
                <div class="span1">使用高德地图</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/thirdpart/chart/echart.html">
                <div class="span1">使用echart图表渲染</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/thirdpart/chart/chart.html">
                <div class="span1">使用highcharts图表渲染</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box" href="pages/thirdpart/artTemplate/artTemplate.html">
                <div class="span1">使用artTemplate模板</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </dd>
</dl>